<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script th:src="@{/qinjiang/js/echarts.min.js}"></script>

<link th:href="@{/qinjiang/css/mycss.css}" rel="stylesheet">
<link th:href="@{/qinjiang/css/admin.css}" rel="stylesheet">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>
<body>
<div th:replace="~{index::headdiv}"></div>
<!--sec:authorize="hasRole('admin')"-->
<div class="container" id="tab_div" >
    <div class="row clearfix">
        <div class="col-md-12 column" style="padding-left: 0">
            <table class="table table-bordered" id="usertable">
                <thead>
                <tr>
                    <th style="text-align: center">
                        编号
                    </th>
                    <th style="text-align: center">
                        用户名
                    </th>
                    <th style="text-align: center">
                        密码
                    </th>
                    <th style="text-align: center">
                        权限
                    </th>
                    <th style="text-align: center">
                        操作
                    </th>
                </tr>
                </thead>
                <tbody id="tableBody">

                </tbody>
            </table>
        </div>
    </div>
</div>

<!--弹出框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     style="margin-top: 100px">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: center">修改用户</h4>
            </div>
            <div class="modal-body">
                <div class="form-group" style="display: none">
                    <label for="txt_statu">id</label>
                    <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="id">
                </div>
                <div class="form-group">
                    <label for="txt_departmentname">用户名</label>
                    <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname"
                           placeholder="用户名">
                </div>
                <div class="form-group">
                    <label for="txt_parentdepartment">密码</label>
                    <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment"
                           placeholder="密码">
                </div>

                <div class="form-group">
                    <label>权限</label>
                    <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel"
                           placeholder="用户权限">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span
                        class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                </button>
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span
                        class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                </button>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    $(function(){
        doList();
    });

    //修改用户
    function update_btn (user){
        $("#txt_statu").val(user.id);
        $("#txt_departmentname").val(user.name);
        $("#txt_parentdepartment").val(user.password);
        $("#txt_departmentlevel").val(user.role);
        $('#myModal').modal();  //弹出
    }


    //保存按钮
    $("#btn_submit").click(function () {
        id = $("#txt_statu").val();
        name = $("#txt_departmentname").val();
        password = $("#txt_parentdepartment").val();
        role = $("#txt_departmentlevel").val();
        $.getJSON("/updateUser", {id: id, name: name, password: password,role: role}, function (status) {
            if (!status) {
                alert("失败")
            }else {
                doList();
            }
        })
    });


    //获取所有用户
    function doList(){
        $.getJSON("/getAllUsers",function (users) {
            $("#tableBody").empty();
            for (var i = 0; i < users.length; i++) {
                var user = users[i];
                $("#tableBody").append(
                    $("<tr>").append($("<td>").html(i+1))
                        .append($("<td>").html(user.name))
                        .append($("<td>").html(user.password))
                        .append($("<td>").html(user.role))
                        .append($("<td>").append('<button type="button" className="btn btn-success" onclick=update_btn('+JSON.stringify(user)+')>修改</button> &nbsp')
                                         .append('<button type="button" className="btn btn-danger" onclick=deleteUser('+JSON.stringify(user.name)+')>删除</button>')
                        )

                );
            }
        },JSON)
    }

    function deleteUser(name){
      if (name != "admin"){
          $.getJSON("/deleteUser",{username:name},function (status) {
              if (status){
                  doList();
              }
          })
      }else {
          alert("管理员账号不能删除")
      }
    }


</script>
</html>